<template>
  <view class="profile-container">
    <scroll-view :scroll-y="true" class="scroll-view">
      <!-- 用户信息头部 -->
      <view class="header-section">
        <view class="user-info">
          <image src="/static/images/avatar-cat.jpg" class="avatar"></image>
          <view class="details">
            <text class="nickname">hello wd</text>
            <view class="vip-tag">
              <uv-icon name="level" color="#f9a825" size="14"></uv-icon>
              <text>会员用户</text>
            </view>
          </view>
        </view>
        <view class="actions">
          <uv-icon name="setting" color="#333" size="24"></uv-icon>
          <uv-button
            type="primary"
            size="mini"
            shape="circle"
            :text="switchButtonText"
            @click="switchIdentity"
            :customStyle="{ backgroundColor: '#333', color: '#fff', border: 'none', marginTop: '10px' }"
          ></uv-button>
        </view>
      </view>

      <!-- 资产统计 -->
      <view class="stats-card">
        <view class="stat-item">
          <text class="value">0.00</text>
          <text class="label">账户余额</text>
        </view>
        <view class="stat-item">
          <text class="value">1</text>
          <text class="label">我的关注</text>
        </view>
        <view class="stat-item">
          <text class="value">0</text>
          <text class="label">优惠卷</text>
        </view>
      </view>

      <!-- 功能入口 -->
      <view class="grid-card">
        <uv-grid :col="4" :border="false">
          <uv-grid-item v-for="(item, index) in gridItems" :key="index">
            <uv-icon :name="item.icon" size="28"></uv-icon>
            <text class="grid-text">{{ item.text }}</text>
          </uv-grid-item>
        </uv-grid>
      </view>

      <!-- 更多服务 -->
      <view class="list-card">
        <uv-cell-group :border="false">
          <uv-cell
            v-for="(item, index) in serviceItems"
            :key="index"
            :title="item.text"
            isLink
            :border="index !== serviceItems.length - 1"
          >
            <template v-slot:icon>
              <uv-icon :name="item.icon" size="22" class="cell-icon"></uv-icon>
            </template>
          </uv-cell>
        </uv-cell-group>
      </view>

    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const userGridItems = [
  { icon: 'account-fill', text: '达人入驻' },
  { icon: 'trophy-fill', text: '招商加盟' },
  { icon: 'order', text: '服务订单' },
  { icon: 'coupon-fill', text: '领券大厅' },
];

const companionGridItems = [
  { icon: 'rmb-circle-fill', text: '我的钱包' },
  { icon: 'order', text: '订单管理' },
  { icon: 'star-fill', text: '我的评价' },
  { icon: 'setting-fill', text: '服务设置' },
];

const gridItems = computed(() => {
  return currentIdentity.value === 'user' ? userGridItems : companionGridItems;
});

const currentIdentity = ref('user'); // 'user' 或 'companion'

const switchButtonText = computed(() => {
  return currentIdentity.value === 'user' ? '切换为达人' : '切换为用户';
});

const switchIdentity = () => {
  currentIdentity.value = currentIdentity.value === 'user' ? 'companion' : 'user';
  uni.showToast({
    title: `已切换为${currentIdentity.value === 'user' ? '用户' : '达人'}身份`,
    icon: 'none',
  });
};

const serviceItems = ref([
  { icon: 'bell', text: '系统通知' },
  { icon: 'map', text: '地址管理' },
  { icon: 'question-circle', text: '问题反馈' },
  { icon: 'reload', text: '退款售后' },
  { icon: 'server-man', text: '联系客服' },
]);
</script>

<style lang="scss" scoped>
.profile-container {
  height: 100vh;
  background-color: #f7f8fa;
}

.scroll-view {
  height: 100%;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 20px 60px;
  background: linear-gradient(to bottom, #ffefb8, #f7f8fa);
  .user-info {
    display: flex;
    align-items: center;
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid #fff;
    }
    .details {
      margin-left: 15px;
      .nickname {
        font-size: 18px;
        font-weight: bold;
        display: block;
      }
      .vip-tag {
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 2px 8px;
        font-size: 11px;
        margin-top: 6px;
        color: #f9a825;
        .uv-icon {
          margin-right: 4px;
        }
      }
    }
  }
  .actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

.stats-card {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 12px;
  margin: -40px 15px 15px;
  padding: 20px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 2;
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .value {
      font-size: 18px;
      font-weight: bold;
    }
    .label {
      font-size: 13px;
      color: #666;
      margin-top: 6px;
    }
  }
}

.grid-card {
  background-color: #fff;
  border-radius: 12px;
  margin: 15px;
  padding: 15px 5px;
  .grid-text {
    font-size: 13px;
    margin-top: 8px;
    color: #333;
  }
}

.list-card {
  background-color: #fff;
  border-radius: 12px;
  margin: 15px;
  .cell-icon {
    margin-right: 10px;
  }
}
</style>
